<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <body>
              <style>
              *{
                  margin: 0px;
                  padding: 0px;
                  list-style: none;
              }
              ul{
                  overflow: hidden;
              }
              ul li{
                  float: left;
                  width: 120px;
                  text-align: center;
              }
              p{
                  width: 100px;
                  height: 40px;
                  line-height: 40px;
                  display: none;
              }
              li.current{
                  background: #f60;
                  color: white;
              }
              p.current{
                  display: block;
              }
              </style>
            <ul>
                    <li class="current">公告</li>
                    <li>规则</li>
                    <li>安全</li>
                    <li>公益</li>
                    <li>项目</li>
                    <li>千牛</li>
                </ul>
                <div>
                    <p class="current">公告内容</p>
                    <p>规则内容</p>
                    <p>安全内容</p>
                    <p>公益内容</p>
                    <p>项目内容</p>
                    <p>千牛内容</p>
                </div>
 
                   <script>
                   var tags=document.getElementsByTagName('li');
                   var cons=document.getElementsByTagName('p');
                   for(var i=0;i<tags.length;i++){
                       tags[i].lbx=i;
                       tags[i].onclick=function(){
                           for(var t=0;t<tags.length;t++){
                               tags[t].className='';
                               cons[t].className='';
                           }
                           this.className="current";
                           var n=this.lbx;
                           cons[n].className='current'
                       }
                   }
                   </script>
        </body>
</html>
